<template>
  <div class="base-select">
    <span style="margin-right:4px">{{ label }}</span>
    <el-select
      v-model="text"
      size="mini"
      :disabled="disabled"
      :style="{width:`${width}px`}"
      clearable
      @change="valueChange"
    >
      <el-option v-for="(item, index) in options" :key="index" :value="item.value" :label="item.label" />
    </el-select>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {
    label: {
      type: String,
      default: ''
    },
    value: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '180'
    },
    options: {
      type: Array,
      default: () => []
    },
    disabled: {
      type: [Boolean, String],
      default: false
    }
  },
  data() {
    return {
      text: ''
    }
  },
  created() {
    this.text = this.value
  },
  mounted() {},
  methods: {
    valueChange(val) {
      console.log(val)
      this.$emit('update:value', this.text)
    }
  }
}
</script>

<style lang="less" scoped>
.base-select{
  display: inline-flex;
  align-items: center;
}
</style>
